<template>
  <div class="index">
    <div class="About">
      <Header left="arrow" title="关于我们"></Header>
      <div class="body">
        <div class="body_top">
          <i class="green_spot"></i>
          <i class="green_line"></i>
          <i class="blue_spot"></i>
          <i class="blue_line"></i>
          <i class="green_spot_deep"></i>
          <i class="green_line_deep"></i>
          <i class="red_spot"></i>
          <i class="red_line"></i>
          <div class="body_center">
            <div class="controller">heyTea开发组</div>
            <div class="version">Version {{ version }}</div>
          </div>
        </div>
        <div class="body_cell">
          <div
            class="card_view"
            v-for="(value, key, index) in about_list"
            :key="index"
          >
            <van-cell
              v-if="value.text_boolean"
              :title="value.about_name"
              is-link
              :to="value.path"
              :value="value.text"
            />
            <van-cell
              v-else
              :title="value.about_name"
              is-link
              :to="value.path"
            />
          </div>
        </div>
      </div>
      <div class="bottom">
        <van-row width="100%">
          <van-col span="8" class="bottom_text">heyTea开发组</van-col>
          <van-col span="4" class="bottom_text">版权所有</van-col>
          <van-col span="4" class="bottom_text line">技术支持</van-col>
          <van-col span="8" class="bottom_text">heyTea开发组</van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import Vue from "vue";
import { NavBar, Icon, Cell, Row, Col } from "vant";
Vue.use(NavBar).use(Icon).use(Cell).use(Row).use(Col);
export default {
  components: {
    Header,
  },
  data() {
    return {
      version: "1.0.0",
      about_list: [
        {
          about_name: "版本更新",
          text: "已最新",
          text_boolean: true,
          path: "",
        },
        {
          about_name: "使用说明",
          text: "",
          text_boolean: false,
          path: "",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/my" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style scoped>
#index {
  padding-top: 2.13rem;
  height: 100%;
  background-color: #f7f8fa;
}
@font-face {
  font-family: AliHYAiHei;
  src: url("~@/assets/font/AliHYAiHei.ttf");
}
#app > div {
  background-color: rgba(255, 255, 255, 1);
}
.van-nav-bar {
  position: fixed;
  height: 2.13rem;
  line-height: 1.457rem;
  left: 0px;
  top: 0px;
  right: 0px;
  box-shadow: none;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.14901960784313725);
}
.About >>> .van-nav-bar__title {
  font-size: 18px;
}
.left_icon {
  font-size: 25px;
  height: 2.13rem;
  line-height: 2.803rem;
}
.header_title {
  height: 2.13rem;
  line-height: 2.803rem;
}

.body {
  width: 100%;
  margin-top: 46px;
  background-color: #ffffff;
}
.van-cell {
  padding: 18px 15px;
}
.van-cell__title {
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
}
.van-cell__value {
  font-size: 12px;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
  opacity: 0.65;
  padding-right: 4px;
}
.card_view {
  width: 100%;
  position: relative;
}
.card_view::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 15.5px;
  border-bottom: 0.5px solid #333333d8;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.card_view:first-child::before {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  top: 0;
  left: 15.5px;
  z-index: 99;
  border-bottom: 0.5px solid #333333d8;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.body_top {
  position: relative;
  height: 218.5px;
  display: flex;
  justify-content: center;
}
.green_spot {
  position: absolute;
  top: 47px;
  left: 100px;
  width: 2px;
  height: 1px;
  background: rgba(5, 172, 111, 1);
}
.green_line {
  position: absolute;
  top: 47px;
  left: 105.5px;
  width: 23.5px;
  height: 1px;
  background-color: rgba(5, 172, 111, 1);
}
.blue_spot {
  position: absolute;
  top: 46.5px;
  right: 96.5px;
  width: 2px;
  height: 2.5px;
  background: rgba(31, 107, 207, 1);
}
.blue_line {
  position: absolute;
  top: 55.5px;
  right: 96.5px;
  width: 2px;
  height: 56px;
  background: rgba(31, 107, 207, 1);
}
.green_spot_deep {
  position: absolute;
  top: 161.5px;
  right: 96.5px;
  width: 4px;
  height: 4px;
  background: rgba(102, 190, 116, 1);
}
.green_line_deep {
  position: absolute;
  top: 161.5px;
  right: 108px;
  width: 15.5px;
  height: 4px;
  background: rgba(102, 190, 116, 1);
}
.red_spot {
  position: absolute;
  top: 161.5px;
  left: 101.5px;
  width: 3px;
  height: 4px;
  background: rgba(207, 31, 67, 1);
}
.red_line {
  position: absolute;
  top: 120.5px;
  left: 101.5px;
  width: 3px;
  height: 37.5px;
  background: rgba(207, 31, 67, 1);
}
.body_center {
  margin-top: 95px;
  text-align: center;
}
.controller {
  font-family: "AliHYAiHei";
  font-size: 21px;
  font-weight: 400;
  line-height: 29px;
  color: rgba(52, 52, 52, 1);
}
.version {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.5px;
  color: rgba(52, 52, 52, 1);
}
.bottom {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.bottom_text {
  position: relative;
  font-size: 9px;
  font-weight: 400;
  line-height: 12.5px;
  color: rgba(51, 51, 51, 0.6);
  padding: 0 8px;
}
.line::before {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  left: 0;
  top: 1.25px;
  bottom: 1.25px;
  z-index: 99;
  border-left: 1px solid rgba(51, 51, 51, 0.6); /*none*/
}
</style>
